<template>
  <div class="commodity-view">
     <el-dialog
      title="商品详情"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeDialog">
        <el-descriptions>
          <el-descriptions-item label="商品ID">{{viewParam.id}}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{viewParam.name}}</el-descriptions-item>
          <el-descriptions-item label="商品价格">{{viewParam.price}}</el-descriptions-item>
          <el-descriptions-item label="商品备注">{{viewParam.describes}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {postRequest} from '../../util/http'
export default {
  name: 'CommodityView',
  data () {
    return {
      dialogVisible: true,
      viewParam: {
        id: this.$route.query.id
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.view()
    },
    // 关闭弹窗回调方法
    closeDialog () {
      this.$router.push({path: '/commodity/list'})
    },
    // 详情
    async view () {
      let res = await postRequest('/commodity/view', {id: this.viewParam.id})
      if (res.errorCode === 200 && res.data) {
        this.viewParam = res.data
      }
    }
  }

}
</script>

<style>

</style>
